// 配置
// 电影接口地址
const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="'
// DOM 编程 原生js
// 返回的DOM 节点对象
const oForm = document.getElementById('form');
console.log(oForm);
// console.log(Object.prototype.toString.call(oForm))
const oInput = document.querySelector('#search');

const getMovies = (keyword) => {
    // console.log(keyword);
    let reqUrl = '';
    if (keyword) { // 有值
        // 搜索
        reqUrl = SEARCH_API + keyword;
    } else { // 无值
        // 热门
        reqUrl = API_URL;
    }
    fetch(reqUrl) // 二进制流
        .then(res => res.json()) // 解析成json
        .then(data => {
            // console.log(data);
            showMovies(data.results); // 调用显示函数
        })
}

// movie list render
const showMovies = (movies) => {
    main.innerHTML = ''; // 清空
    main.innerHTML = movies.map(movie => {
        // es6 解构
        // 右边{ }解给左侧{} es6 优雅快捷
        // 立马成为常量或变量
        const { title, poster_path, vote_average, overview } = movie;
        return `
        <div class="movie">
          <img src="${IMG_PATH + poster_path}" alt="${title}">
          <div class="movie-info">
            <h3>${title}</h3>
            <span>${vote_average}</span>
          </div>
          <div class="overview">
            <h3>Overview</h3>
            ${overview}
          </div>
        </div>
    `
    }).join('');
}

// 页面加载完成后执行
window.onload = function () {
    getMovies();
}

oForm.addEventListener('submit', function (e) {
    // 事件对象 event
    e.preventDefault(); // 阻止表单的默认行为
    const search = oInput.value.trim(); // 获取输入框的值，去掉首位空格
    if (search) { // 输入框有值
        // 搜索电影
        getMovies(search);
    }
    // if(oInput.value.trim()){
    //     // trim 去掉首尾空格
    //     console.log(oInput.value.trim());
    // }else{
    //     console.log('请输入内容');
    // }
})